<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=10.0,user-scalable=yes">
    <title>LUZ CATS</title>
</head>
<!-- 
1.二级菜单
本网站导航栏中的 “精彩合作” 小板块具有二级菜单。

2.可链接的网页
导航栏中的”精彩合作”栏目下的二级菜单的”猫咪领养”可转到”蹲领养.html”；
导航栏中的”信息公告”栏目可转到”公告页.html”。

3.最顶端主页图片轮播，并且鼠标悬浮在上时停止轮播，鼠标移开继续轮播
javascript实现，轮播时2s自动换图片，共5张图片，且轮播到对应图片时其小标变色（变黄）

4.最顶端主页图片配上对应小标，可以通过对应小标手动变换展示图片
javascript实现

5.最顶端主页图片配有左右箭头，可手动切换到前一张或后一张展示图片，同时对应小标变色
javascript实现

6.中间页面图片走马灯展示，同样鼠标悬浮在上时停止轮播，鼠标移开继续轮播
原网页为视频播放，为尽量还原，放了图片的滑动走马灯展示

7.在蓝色大块的“救助猫咪 美好生活”板块，其下大标题和logo可在鼠标悬浮时逐渐变大
css实现，transition实现过渡自然，transform:scale(1.2)实现放大

8.在"news"板块，每张图片当鼠标悬浮在上时图片消失，显示说明文字
javascript实现

9.在”联系我们”栏目，有两个不断弹跳的svg箭头图案
Javascript动画库实现
还有一个鼠标悬浮时会心跳状变色的按钮”发送”
css库实现 
-->
<body>
    <div id="head">  
      <div class="pre"></div>  <!--左箭头-->
      <div class="next"></div>  <!--右箭头-->
      <div id="backgroundimg">  <!--主页轮播的图片-->
       <ul>
        <li><img src="images/p1_fig1.jpg"/></li>
        <li><img src="images/p1_fig2.jpg"/></li>
        <li><img src="images/p1_fig3.jpg"/></li>
        <li><img src="images/p1_fig4.jpg"/></li>
        <li><img src="images/p1_fig5.jpg"/></li>
       </ul> 
      </div>
      <div id="swiper">  <!--主页图片对应的小标-->
        <span tabindex="0" role="button"></span>
        <span tabindex="0" role="button"></span>
        <span tabindex="0" role="button"></span>
        <span tabindex="0" role="button"></span>
        <span tabindex="0" role="button"></span>
       </div>
      <script>  /*主页图片轮播，按小图标手动变换*/
        var k=document.getElementById("backgroundimg");
        var s=document.getElementById("swiper");
        var lik=k.getElementsByTagName("li");
        var spa=s.getElementsByTagName("span");
        function change(x,y){  /*从lik[x]的图片切换到lik[y]的图片,小图标对应变化*/
           lik[x].style.opacity=0;
           lik[y].style.opacity=1;
           spa[x].style.background="black";
           spa[x].style.opacity=0.4;
           spa[y].style.background="rgb(36, 80, 107)";
           spa[y].style.opacity=1;
        }
        change(4,0); /*初始化*/
        var n=0;  /*初始化*/
        function lunbo(){
           n++;
           if(n==lik.length) {change(4,0); n=0;}
           else change(n-1,n);
        }
        var timer=setInterval(lunbo,2000);   /*自动轮播，2s一换*/
        document.getElementById("head").onmouseover=function(){    /*鼠标在上时停止轮播*/
          clearInterval(timer);
        }
        document.getElementById("head").onmouseout=function(){  /*鼠移开时继续轮播*/
          timer=setInterval(lunbo,2000);
        }
        //for(var i=0;i<=4;i++){  //用for循环不能实现，只能单个单个输入（不知道为什么）
          spa[0].onclick=function(){change(n,0); n=0;}  //实现通过点击小图标使得轮播图片转到相应图片
          spa[1].onclick=function(){change(n,1); n=1;}
          spa[2].onclick=function(){change(n,2); n=2;}
          spa[3].onclick=function(){change(n,3); n=3;}
          spa[4].onclick=function(){change(n,4); n=4;}
        //}
        var pre=document.getElementsByClassName("pre")[0];
        var next=document.getElementsByClassName("next")[0];
          pre.onclick=function(){
            if(n!=0){change(n,n-1);n--;}
            else {change(0,4); n=4;}
          }
          next.onclick=function(){
            if(n!=4){change(n,n+1);n++;}
            else {change(4,0); n=0;}
          }
      </script>
      <div id="header">  <!--最顶上的导航栏-->
        <div id="logo"><img src="images/logo.jpg" width="124" height="82" alt=""/></div>
        <ul class="menu">
          <li><a class="mylink">关于我们</a></li>
          <li><a href="公告页.html" class="mylink">信息公告</a></li>
          <li><a class="mylink">合作</a></li>
          <li class="first">
            <a class="mylink">精彩活动∨</a>
            <ul class="secondmenu">
              <li class="li1"><a href="蹲领养.html" class="mylink">猫咪领养</a></li>
              <li>志愿活动</li>
            </ul>
          </li>
          <li><a class="mylink">猫咪日常</a></li>
          <li><a class="mylink">加入我们</a></li>
          <li class="li2"><a class="mylink">简|繁|EN</a></li>
        </ul>
      </div>
      <div class="title1"></div> <!--title1-->
    </div>
    <div style="margin-top:70px; text-align: center; width:100%; height: 416px; color:black;"> <!--about us部分-->
        <div style="font-weight:bolder; font-size:24pt;">ABOUT US</div>
        <div style="font-size:22pt;">关于我们</div>
        <div style="font-size: 16pt; margin-top: 68px; line-height: 200%;">
          我们是兰州大学由爱猫人士组成的团队，我们简称兰大猫协。
          兰大猫协是类似于学生社团形式存在的高校内流浪猫救助组织。<br>
          我们致力于通过送养、绝育等科学方法和平减少学校内流浪猫数量，提高流浪猫生存环境。
          城关与榆中校区的猫都在我们的救助范围内。<br>
          我们为兰大的猫咪们创建了公众号和流浪猫救助群，
          发展多年来，围绕兰大的猫咪，我们开展了各种活动和服务。<br><br>
          <a href="^" class="more">MORE></a>
        </div>
    </div>
    <div style="margin-left:142px; overflow:hidden; width:1368px; height:637px; background:rgb(36,80,107);"> <!--图片走马灯部分-->
      <marquee width="100%" direction="right" height="100%" scrollamount="20" onmouseover="this.stop()" onmouseout="this.start()">
      <img src="images/midle1.jpg" width="1368px" height="637px" alt=""/>
      <img src="images/midle2.jpg" width="1368px" height="637px" alt=""/>
      <img src="images/midle3.jpg" width="1368px" height="637px" alt=""/>
      <img src="images/midle4.jpg" width="1368px" height="637px" alt=""/>
      <img src="images/midle5.jpg" width="1368px" height="637px" alt=""/>
      </marquee>
    </div>
    <div style="margin-top:104px; width:100%; height:673px; background:rgb(36, 80, 107); color:#fff;">
      <div style="z-index:10; width:100%; height:auto; text-align: center; font-weight:bolder; font-size:24pt;"><br><br><br>TO HELP CATS AND MAKE BETTER LIFE</div>
      <div style="text-align: center; font-size:20pt; font-weight: lighter;">救助猫咪 美好生活</div>
      <div style="z-index:5; margin-left:290px; margin-top:65px; width:1132px; height:171px;">
        <div class="subpic">
          <div class="subl"><img src="images/m1.png" width="120px" height="120px" alt=""/></div>
          <div class="te">宣传</div>
        </div>
        <div class="subpic">
          <div class="subl"><img src="images/m2.png" width="120px" height="120px" alt=""/></div>
          <div class="te">救助</div>
        </div>
        <div class="subpic">
          <div class="subl"><img src="images/m3.png" width="120px" height="120px" alt=""/></div>
          <div class="te">投喂</div>
        </div>
        <div class="subpic">
          <div class="subl"><img src="images/m4.png" width="120px" height="120px" alt=""/></div>
          <div class="te">管理</div>
        </div>
      </div>
      <div style="z-index:8; margin-left:290px; width:1132px; color:#fff;">
        <div class="con">宣传校园猫咪，让更多人知道猫咪的困境，让更多人参与到校园猫咪的救助活动中</div>
        <div class="con">为需要就医的猫咪发布筹款，并及时将猫咪送医，同时为尽可能多的猫咪进行绝育</div>
        <div class="con">负责上学及假期期间校园猫咪的投喂工作，用筹款为猫咪购粮，同时安排人员准时投喂</div>
        <div class="con">为校园中适合领养的猫咪寻找一个家，对不适合领养的猫咪时常关注其在校的生活状况</div>
      </div>
    </div>
    <div id="news">
      <!--<div style="font-weight:bolder; font-size:27pt;">NEWS</div>-->
      <div class="texiao">
        <div style="z-index:10; width:100%; height:auto; text-align: center; font-weight:bolder; font-size:24pt;">NEWS</div>
        <div style="font-size:22pt; margin-bottom: 100px; font-weight: lighter;">猫咪新闻</div>
      </div>
      <div id="newpics">
        <div class="newpic"><img src="images/n1.jpg" width="260px" height="450px" alt=""/></div>
        <div class="newpic"><img src="images/n2.jpg" width="260px" height="450px" alt=""/></div>
        <div class="newpic"><img src="images/n3.jpg" width="260px" height="450px" alt=""/></div>
        <div class="newpic"><img src="images/n4.jpg" width="260px" height="450px" alt=""/></div>
      </div>
      <div id="newtext">
        <div class="newpic"><br><br><br>橘玳夫妇<br><br>昔日恩爱夫妇大打出手</div>
        <div class="newpic"><br><br><br>骨子哥被动减肥<br><br>校园明星甲骨猪咪因为过于"沉重",<br>被管理员贴上通告</div>
        <div class="newpic"><br><br><br>白橘妈喜提通告<br><br>封校期间管理员温馨提醒:<br>白橘妈只可远观不可近赏</div>
        <div class="newpic"><br><br><br>小仙为校争光<br><br>为了养活校园猫咪,<br>美貌的小仙参加了京东读书的比赛</div>
      </div>
    </div>

    <script src="anime/anime.min.js"></script>
    <script>
      var newp=document.getElementsByClassName("newpic");
      var m=0;
      for(m=0;m<=3;m++){ (function(m){  
        newp[m].onmouseover=function(){
          anime({
            targets: newp[m],
            opacity:0,
            rotate:'1turn',
            duration:300,
            easing:'easeOutQuad'
          });
        }
        newp[m].onmouseout=function(){
          anime({
            targets: newp[m],
            opacity:1,
            rotate:'1turn',
            duration:300,
            easing:'easeOutQuad'
          });
        }
      })(m)}
    </script> 

    <div class="contact">
      <div class="contact_text">
      如果你有好的想法<br>
      或者想要为校园里的猫猫尽一份力<br>
      快联系我们吧!<br>
        <!-- <div id="button1" class="hvr-back-pulse">QQ群:489929429</div>
        <div id="button2" class="hvr-back-pulse">微信公众号:兰大猫协</div> -->
        <div class="divsvg" style="margin-left: 1350px; margin-top:-80px; width:20px; height:auto; float:left;">
          <svg viewBox="-3 -3 7 6" fill="none" style="width:100px">
            <path d="M2 0 L 0 2 L -2 0 M 0 2 L 0 -3" fill="none" border="1px" stroke="#fff"></path>
          </svg>
        </div>
          <div class="divsvg" style="margin-left: 1250px; margin-top:-120px; width:20px; height:auto; float:left;">
          <svg viewBox="-3 -3 7 6" fill="none" style="width:100px">
            <path d="M2 0 L 0 2 L -2 0 M 0 2 L 0 -3" fill="none" border="1px" stroke="#fff"></path>
          </svg>
        </div>
      </div>
      <div class="contact-form">
        <div class="info" style="width:550px; height:60px; margin-left:75px;">&nbsp姓名:&nbsp<input></input></div>
        <div class="info"  style="width:550px; height:60px; margin-left:50px;">&nbsp邮箱:&nbsp<input></input></div>
        <div class="info"  style="width:1200px; height:300px; margin-left:50px; ">&nbsp想说的话:&nbsp<textarea></textarea></div>
        <div id="send" class="hvr-back-pulse">发送</div>
      </div>
    </div>

    <script src="anime/anime.min.js"></script>
    <script>    <!--箭头的动画-->
      anime({
         targets: '.divsvg',
         translateY: '50px',
         duration: 300,
         loop: true,
         direction: 'alternate',
         easing: 'easeInCubic'
       });
   </script>

    <div class="footer">    <!--底部-->
      <div class="footlogo"><img src="images/logo.jpg" width="124px" height="82px" alt=""/></div>
      <div class="foottext">
        <div style="height:63px; width:100%; margin-bottom: 9px;">
          <img src="images/LZUlogo.svg" width="200" height="60" alt="兰州大学">
        </div>
        <div class="foottext2">加入我们 &nbsp;｜ &nbsp; 联系我们</div>
        甘肃省兰州市天水南路222号 &nbsp;|&nbsp; 邮编: 730000<br>
         兰大猫咪 ZLU CATS.COM ALL RIGHTS RESERVED 
      </div>
    </div>
</body>
</html> 